<template>
  <el-container style=" border: 1px solid #eee;overflow: auto;height: 100vh;">
  <el-aside :width="aside_width" style="background-color:white; overflow: hidden;" >
   <Aside :isCollapse="isCollapse"/>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px;border-bottom: rgba(168,168,168,0.3) 1px solid;height: 60px;">
     <Header @doCollapse="doCollapse" :icon="icon"/>
    </el-header>
    
    <el-main class="main-container">
      <!-- <Main/> -->
      <router-view style="flex: 1"/>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import Aside from './Aside.vue'
import Header from './Header.vue'
import Main from './Main.vue'
export default {
  name: "Index",
  
  components:{
    Aside,
    Header,
    Main
  },
  data(){
    return{
      isCollapse: false,
      aside_width: '200px',
      icon: 'el-icon-s-fold'
    }
  },
  methods:{
    doCollapse(){
      this.isCollapse = !this.isCollapse
      if(!this.isCollapse){// 展开
        this.aside_width='200px',
        this.icon = 'el-icon-s-fold'
      }else{ // 关起、关闭、收起
        this.aside_width = '63.996px',
        this.icon = 'el-icon-s-unfold'
      }
    }
  }
}
</script>

<style scoped>

  .el-header {
    /* background-color: #B3C0D1; */
    color: #333;
    line-height: 60px;
  }
  .el-main{
    
    padding: 5px;
    
  }
  .el-aside {
    color: #333;
    background-color: #fff;
  }

  .main-container{
    overflow: hidden; /* 禁止自动添加滚动条 */
  /* 或者使用以下方式设置固定高度
  max-height: 300px;
  overflow-y: auto;
  */
  }
</style>